<template>
    <h-section title="能效报告流程历史" collapse>
        <div class="flow-text">
            <span>{{ detail.requestName }} 版本详情</span>
            <a @click.stop="showFlowImg(imgSrc)">查看流程图</a>
        </div>
        <a-table rowKey="taskId" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
            <template #result="{ record }">
                {{ record.variables.result }}
            </template>
            <template #changeReason="{ record }">
                {{ record.variables?.changeReason }}
            </template>
        </a-table>
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { useFlowImg } from '@/hooks/content/useFlowImg';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'HistoryRecord',
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const { getFlowImg, showFlowImg } = useFlowImg();
        const state = reactive<any>({
            list: [],
            imgSrc: '',
            showPreviewImg: false
        });
        // 表格表头栏
        const tableColumns = [
            {
                title: '节点开始时间',
                dataIndex: 'createTime',
                align: 'center',
                width: 150
            },
            {
                title: '操作人',
                dataIndex: 'assigneeName',
                align: 'center',
                width: 120
            },
            {
                title: '操作步骤',
                dataIndex: 'taskName',
                align: 'center',
                width: 100
            },
            {
                title: '操作结果',
                dataIndex: 'result',
                slots: { customRender: 'result' },
                align: 'center',
                width: 100
            },
            {
                title: '流程意见',
                dataIndex: 'taskDesc'
            },
            {
                title: '延期结果调整原因',
                slots: { customRender: 'changeReason' }
            },
            {
                title: '节点完成时间',
                dataIndex: 'endTime',
                width: 150,
                align: 'center'
            }
        ];
        const getList = async () => {
            const query = {
                instanceId: props.detail.instanceId,
                type: 'versionStatistics'
            };
            const { success, moule, errorMsg } = await api.historyModel.historyOperationByInstanceId(query);
            if (success) {
                if (moule && moule.length) {
                    state.list = [...moule];
                }
            } else {
                message.error(errorMsg);
            }
        };
        watch(
            () => props.detail,
            (n) => {
                if (n && n.instanceId) {
                    getList();
                    getFlowImg(n.instanceId).then((src: any) => {
                        state.imgSrc = src;
                    });
                }
            },
            { immediate: true, deep: true }
        );
        return {
            ...toRefs(state),
            tableColumns,
            showFlowImg
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
</style>